<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  todoList: {
    id: string;
    todoDesc: string;
    isCompleted: boolean;
  }[];
}>();

const emits = defineEmits<{
  (e: 'toggleTodoStatus', id: string): void;
}>();


</script>
<template>
  <div class="todo-list">
    <ul>
      <li v-for="item in props.todoList" :key="item.id">
        <span>{{ item.todoDesc }}</span>
        <div class="operate">
          <span> {{  item.isCompleted ? '完成' : '没完成' }}</span>
          <button @click="emits('toggleTodoStatus', item.id)">状态反转</button>
        </div>
      </li>
    </ul>
  </div>
</template>




